<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :height="tableHeight"
      :header-cell-style="headerCellStyle"
    >
      <!-- -->
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column
        v-for="(column, index) in columns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
      ></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleAdd"
            >新增</el-button
          >
          <el-button type="text" size="small" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { TableColumn } from "./types";

export default defineComponent({
  props: {
    columns: {
      type: Array as () => TableColumn[],
      required: true
    },
    mockData: {
      type: Array as () => any[],
      required: true
    }
  },
  setup(props) {
    const tableData = ref<any[]>([]);
    const currentPage = ref(1);
    const pageSize = ref(15);
    const total = ref(props.mockData.length);
    const tableHeight = ref("70vh"); // 设置表格高度
    const headerCellStyle = () => {
      return {
        backgroundColor: "#f0f0f0", // 设置表头背景颜色
        color: "#333", // 设置表头文字颜色
        fontWeight: "bold" // 设置表头文字加粗
      };
    };

    const handleSizeChange = (val: number) => {
      pageSize.value = val;
      updateTableData();
    };

    const handleCurrentChange = (val: number) => {
      currentPage.value = val;
      updateTableData();
    };

    const handleAdd = () => {
      // 新增逻辑
    };

    const handleDelete = (row: any) => {
      // 删除逻辑
    };

    const updateTableData = () => {
      tableData.value = props.mockData.slice(
        (currentPage.value - 1) * pageSize.value,
        currentPage.value * pageSize.value
      );
    };

    updateTableData();

    return {
      tableData,
      currentPage,
      pageSize,
      total,
      handleSizeChange,
      handleCurrentChange,
      handleAdd,
      handleDelete,
      tableHeight,
      headerCellStyle
    };
  }
});
</script>
<style scoped>
.el-table {
  margin: 10px 50px 10px 0px; /* 设置左右边距为50px，上下边距为10px */
}
</style>
